<template>
  <div class="login">
    <van-nav-bar left-arrow title="会员登录" @click-left="$router.back()" />
    <div class="content">
      <div class="cont-head">
        <div class="head-1">手机号登录</div>
        <div class="head-2">未注册的手机号登录后将自动注册</div>
      </div>
      <div class="cont-form">
        <div class="form-item">
          <input
            v-model="phoneNumber"
            placeholder="请输入手机号码"
            type="text"
          />
        </div>
        <div class="form-item">
          <input v-model="picWord" placeholder="请输入图形验证码" type="text" />
          <img v-if="picUrl" :src="picUrl" alt="" @click="getPicCode" />
        </div>
        <div class="form-item">
          <input
            v-model="phoneSms"
            placeholder="请输入短信验证码"
            type="text"
          />
          <button class="btn" @click="getSecond">
            {{
              totalSecond === Second
                ? "获取验证码"
                : Second + "秒后重新获取验证码"
            }}
          </button>
        </div>
      </div>
      <van-button
        color="linear-gradient(to right, #EEB037, #FD9616)"
        @click="login"
      >
        登录
      </van-button>
    </div>
  </div>
</template>
<script>
import { getCode, getPicCode, login } from '@/api/login'
import { Toast } from 'vant'

export default {
  name: 'loginCom',
  components: {},
  data () {
    return {
      picCode: '', // 用户输入的验证码
      picKey: '', // 图形验证码的key
      picUrl: '', // 存储接口请求来的图片
      phoneSms: '', // 手机验证码
      totalSecond: 60, // 总秒数
      Second: 60, // 当前秒数
      timer: null, // 定时器名字
      phoneNumber: '', // 输入的手机号
      phoneCode: '',
      picWord: ''
    }
  },

  computed: {},

  methods: {
    valid () {
      if (!/^1[3-9]\d{9}$/.test(this.phoneNumber)) {
        Toast('请输入正确的手机号')
        return false
      }
      if (!/^\w{4}$/.test(this.picWord)) {
        this.$toast('请输入正确的图形验证码')
        return false
      }
      return true
    },
    async getSecond () {
      if (!this.valid()) {
        return
      }
      if (!this.timer && this.totalSecond === this.Second) {
        const res = await getCode(this.picWord, this.picKey, this.phoneNumber)
        console.log(res)
        this.timer = setInterval(() => {
          this.Second--
          if (this.Second <= 0) {
            clearInterval(this.timer)
            this.timer = null
            this.Second = this.totalSecond
          }
        }, 1000)
      }
    },
    async login () {
      if (!this.valid()) {
        return false
      }
      if (!/^\w{6}$/.test(this.phoneSms)) {
        this.$toast('您输入的手机验证码有问题')
        return false
      }
      try {
        await login(this.phoneNumber, this.phoneSms)
        this.$toast('登录成功')
        this.$router.push('/')
      } catch (error) {
        console.log(error)
      }
    },
    async getPicCode () {
      const {
        data: {
          data: { base64, key }
        }
      } = await getPicCode()
      this.picUrl = base64
      this.picKey = key
    }
  },

  created () {
    this.getPicCode()
    Toast('你好啊')
    this.$toast('我来了')
  },
  destroyed () {
    clearInterval(this.timer)
  }
}
</script>
<style lang="less">
.login {
  .content {
    .login-btn {
      margin-top: 20px;
    }

    .van-button {
      margin-top: 50px;
      width: 100%;
      border-radius: 30px;
      font-size: 20px;
    }

    padding: 80px 30px;

    .cont-head {
      margin-bottom: 60px;

      .head-1 {
        font-size: 35px;
        margin-bottom: 20px;
      }

      .head-2 {
        color: #c1c5c8;
      }
    }

    .cont-form {
      .form-item {
        padding: 30px 20px;
        border-bottom: 1px solid #f5f5f5;

        .btn {
          border: none;
          color: #d4c59d;
          background-color: white;
          float: right;
          margin-right: 10px;
          font-size: 14px;
        }

        img {
          width: 110px;
          height: 30px;
          float: right;
          margin-bottom: auto;
        }

        input {
          border: none;
          font-size: 15px;
          width: 150px;
          height: 30px;
        }
      }
    }
  }
}
</style>

<style lang="less">
.login {
  .content {
    .login-btn {
      margin-top: 20px;
    }

    .van-button {
      margin-top: 50px;
      width: 100%;
      border-radius: 30px;
      font-size: 20px;
    }

    padding: 80px 30px;

    .cont-head {
      margin-bottom: 60px;

      .head-1 {
        font-size: 35px;
        margin-bottom: 20px;
      }

      .head-2 {
        color: #c1c5c8;
      }
    }

    .cont-form {
      .form-item {
        padding: 30px 20px;
        border-bottom: 1px solid #f5f5f5;

        .btn {
          border: none;
          color: #d4c59d;
          background-color: white;
          float: right;
          margin-right: 10px;
          font-size: 14px;
        }

        img {
          width: 110px;
          height: 30px;
          float: right;
          margin-bottom: auto;
        }

        input {
          border: none;
          font-size: 15px;
          width: 150px;
          height: 30px;
        }
      }
    }
  }
}
</style>
